/*
 * Copyright (C) 2014 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/*
@styleguide Tab Navigation


## Regular Tabs

Our default tabs come complete with a panel attached to the tabs that displays the content inside each tab.

jQueryUI adds all the classes, once you initialize the tabs using the script and markup.


```html
<div id="styleguide-tabs-demo-regular">
  <ul>
    <li><a href="#tabs-1">Tab One</a></li>
    <li><a href="#tabs-2">Tab Two</a></li>
    <li><a href="#tabs-3">Tab Three</a></li>
  </ul>
  <div id="tabs-1">Tab 1 content</div>
  <div id="tabs-2">Tab 2 content</div>
  <div id="tabs-3">Tab 3 content</div>
</div>
```
      $("#styleguide-tabs-demo-regular").tabs()

## Minimal Tabs

Don't want the bordered box around each tab panel?

Simply add the **.ui-tabs-minimal** class to the parent tab element.

```html
<div id="styleguide-tabs-demo-minimal" class="ui-tabs-minimal">
  <ul>
    <li><a href="#tabs-1">Tab One</a></li>
    <li><a href="#tabs-2">Tab Two</a></li>
    <li><a href="#tabs-3">Tab Three</a></li>
  </ul>
  <div id="tabs-1">Tab 1 content</div>
  <div id="tabs-2">Tab 2 content</div>
  <div id="tabs-3">Tab 3 content</div>
</div>
```


      $("#styleguide-tabs-demo-minimal").tabs()


*/

// Custom Canvas branding for tabs -- overwriting the defaults in the jQuery UI tabs styles

.ui-tabs {
  .ui-tabs-panel {
    border-color: $ic-border-light;
    padding: 14px;
  }
  .ui-tabs-nav {
    border-bottom-color: $ic-border-light;
    li {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      a {
        @include ic-focus-base;
        color: $ic-link-color;
        font-weight: normal;
        padding: 8px 14px;
        text-shadow: none;
        @if $use_high_contrast { text-decoration: underline; }
        &:focus {
          text-decoration: underline;
          outline: none;
        }

        // special handling for Calendar tabs with solid-color header backgrounds
        #edit_event & { color: $ic-color-light; }
      }
      &.ui-state-hover,
      &:hover {
        background: $ic-color-light;
        border-color: $ic-border-light;
        a {
          color: $ic-font-color-dark;
          @if $use_high_contrast { text-decoration: none; }

          // special handling for Calendar tabs with solid-color header backgrounds
          #edit_event & { color: $ic-link-color; }
        }
      }
      &.ui-state-focus,
      &.ui-state-focus.ui-tabs-active {
        outline: none;
        border-color: $ic-border-light;
        background: $ic-color-light;
        a {
          text-decoration: underline;
          outline: none;
        }
      }
      &.ui-tabs-active,
      &.ui-tabs-active.ui-state-hover,
      &.ui-tabs-active:hover {
        border-color: $ic-border-light;
        background: $ic-color-light;
        a {
          @if $use_high_contrast { text-decoration: none; }

          // special handling for Calendar tabs with solid-color header backgrounds
          #edit_event & { color: $ic-font-color-dark; }
        }
      }
    }
  }

  &.ui-tabs--mini {
    .ui-tabs-nav {
      li {
        a { padding: 4px 8px; }
      }
    }
  }

  &.ui-tabs-minimal {
    .ui-tabs-panel {
      border-width: 0;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 0;
    }
  }
}
